<%--
  Created by IntelliJ IDEA.
  User: Lenovo
  Date: 2021/4/26
  Time: 16:33
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>用户信息添加</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link href="static/plugins/Hplus-v.4.1.0/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="static/plugins/Hplus-v.4.1.0/css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="static/plugins/Hplus-v.4.1.0/css/plugins/iCheck/custom.css" rel="stylesheet">
    <link href="static/plugins/Hplus-v.4.1.0/css/animate.css" rel="stylesheet">
    <link href="static/plugins/Hplus-v.4.1.0/css/style.css?v=4.1.0" rel="stylesheet">
    <link href="static/plugins/Pagination2.1.5/pagination.css" rel="stylesheet">
    <%--  引入假分页插件的css：http://pagination.js.org/ --%>
    <link href="static/plugins/Pagination2.1.5/pagination.css" rel="stylesheet">

    <!-- 全局js -->
    <script src="static/plugins/Hplus-v.4.1.0/js/jquery.min.js?v=2.1.4"></script>
    <script src="static/plugins/Hplus-v.4.1.0/js/bootstrap.min.js?v=3.3.6"></script>
    <%--  引入假分页插件的js：http://pagination.js.org/ --%>
    <script src="static/plugins/Pagination2.1.5/pagination.min.js"></script>
    <script type="text/javascript">
        // 客户端浏览器验证，进行ajax用户信息查询


        ////////////////////////////////// 创建doQuery（）函数，用于查询操作 //////////////////////////////////////////

        function doQuery() {
            // jquery实现ajax的动态查询操作（框架）
            $.ajax({
                type: "POST", // 请求方式
                url: "queryByParams", // 请求的服务器路径（用于向controller层发送请求的页面标志）
                /*
                #:表示id
                .:表示class

                    $("#id名").serialize():在前端给后端传递多个参数时，通过序列化表单值，
                    序列化的值可在生成 AJAX 请求时用于 URL 查询字符串中，这样在ajax提交表单数据时，
                    就不用一一列举每一个参数，只需将data参数设置为：$("form").serialize()即可
                    （就是将传递的多个数据统一打包发给后台，不再需要一一传递）
                 */
                data: $("#queryform").serialize(),
                datatype: "Json", // 服务器响应的内容类型
                success: function (data) { // ajax请求成功时的回调函数
                    // data 是json对象，而不是json字符串，所有data可以像数据集合一样进行遍历

                    //ajax业务处理
                    //如果data不为空时，遍历 data json对象
                    if (data) {
                        /*
                           将查询出来的结果集赋值给分页插件，让其进行分页处理
                           调用分页插件，数据显示的页面渲染放到分页插件的回调函数中即可
                           #pagerbar：放分页插件的div的id
                         */
                        $('#pagerbar').pagination({
                            dataSource: data, // 分页插件绑定ajax查询的结果集
                            pageSize: 10, // 每页显示的记录条数
                            showGoInput: true, // 是否显示 go 的跳转输入框
                            showGoButton: true,  // 是否显示 go 的跳转按钮
                            callback: function (pagedata, pagination) {  // 分页的回调函数，用于显示分页的每一页的数据

                                // 解析分页插件中显示的每一页的pagedata，进行数据显示
                                // 将从数据库中的满足查询条件数据在前台页面显示出来
                                var strShowData = "";
                                // 开始进行遍历data  json对象
                                $.each(pagedata, function (i, eachRow) {
                                    strShowData += "<tr>"
                                    strShowData += "<th scope='row'>" + (i + 1) + "</th>"
                                    //数据库中的属性字段（bean层变量）
                                    strShowData += "<td>" + eachRow.username + "</td>"
                                    strShowData += "<td>" + eachRow.useraddress + "</td>"
                                    strShowData += "<td>" + eachRow.usertel + "</td>"
                                    strShowData += "<td>" + eachRow.userregdate + "</td>"
                                    strShowData += "<td><img src='" + eachRow.userimg + "'style='width: 30px;height: 30px'/></td>"
                                    // eachRow.userid:传递数据库中的userid
                                    strShowData += '<td><a class="btn btn-default" onclick="showModal(' + eachRow.userid + ')" role="button">修改</a></td>'
                                    strShowData += '<td><a class="btn btn-default" onclick="deleteUser(' + eachRow.userid + ')" role="button">删除</a></td>'
                                    strShowData += "</tr>"
                                });

                                // 将要显示的内容写到控件中
                                $("#showData").html(strShowData);

                            }
                        })
                    }


                },
                // ajax请求发生非错误时的回调函数
                error: function () {

                    //alert的作用：提醒框
                    alert("查询信息失败!")
                }
            });

        }

        //////////////////////////// 创建saveMe函数，用于新增用户///////////////////////////////////
        // 用户信息新增
        function saveMe() {

             /*
             使用ajax文件上传：
                使用jquery的serialize方法只能处理字符串，并不能处理字节流。要包含文件流的表单，需要使用 FormData 的dom对象；
                FormData是dom对象，而不是jquery对象；
                使用FormData进行文件上传操作，需要创建一个FormData对象（注意将jquery对象转换为dom对象）
              */

            //创建formData对象，$("#insertform")传递对象，[0]:将jquery对象转为dom对象
            var formData = new FormData($("#insertform")[0]);

            // jquery实现ajax的操作
            $.ajax({
                type: "POST", // 请求方式
                url: "ajaxAddAndUpdateUserInfo", // 请求的服务器路径
                //使用formData来请求参数
                data: formData, // $("#insertform").serialize(),// post请求的数据参数例如： userId=1&userName=zhangsan

                // 使用FormData对象作为ajax发送服务器的数据载体，需要设置以下两个参数
                contentType: false, // 防止request请求位置文件头上下文对象，如果进行处理，则会丢失文件流对象
                processData: false, // 防止request请求自动处理ForamData对象，如果进行处理，则会丢失文件流对象

                datatype: "Json", // 服务器响应的内容类型
                // ajax请求成功时的回调函数
                success: function (data){
                    // data 是json对象，而不是json字符串，所有data可以像数据集合一样进行遍历

                    // 这里是进行ajax业务逻辑处理的地方
                    // 执行ajax引擎的回调处理，这里是用来进行业务逻辑处理的【类似 thread 类的 run 方法； 类似于 servlet的service方法】
                    console.log("ajax查询的数据集：")
                    console.log(data);
                    console.log("djlkfjalksf::::")
                    console.log(JSON.stringify(data))
                    // 体现了dom的局部更新，也是ajax优势
                    // 遍历 data json对象
                    if (data && data == 'ok') {
                        alert("用户信息保存成功！");
                        // 关闭modal，并调用ajax查询，显示刚才修改的数据记录
                        $('#insertModal').modal('hide');
                        // 查询显示信息
                        doQuery();
                    } else {
                        alert("用户信息保存失败！")
                    }
                },
                error: function () {
                    // ajax请求发生非错误时的回调函数
                    alert("用户信息保存失败!！！！")
                }
            });
        }

        //////////////////// 新增保存处理 end////////////////////////

        /////////////////// 修改用户信息 ////////////////////////////

        // 页面一加载就行执行的代码，触发事件：document.ready
        // $(function () {
        //
        // });

        function showModal(userid) {
            // 在浏览器端缓存修改的记录的id值
            // 因为在一个方法里面可以同时调用ajax，所以暂时不需要使用sessionStorage进行缓存
            //window.sessionStorage.setItem("userid", userid);

            console.log(userid)

            // 执行showModal函数就会显示模态框
            $('#insertModal').modal('show');

            // 模态框显示完成之后，使用ajax将修改的数据进行填充
            // 如果userid的值不为，表示要对已有的用户进行用户信息修改则进行将以保存的用户信息就行修改
            if (userid) {
                // 使用jquery实现ajax的另一种操作，ajax获取修改记录的值，并对modal框进行显示赋值；+ userid：前台要修改的用户id
                //queryUserInfoById:请求的服务器路径（用于向controller层发送请求的页面标志）
                $.getJSON("queryUserInfoById?userId=" + userid, function (data) {
                    // console.log("getJSON...")
                    // console.log(data)
                    if (data) {
                        // 回调函数，将需要修改的表单进行重新赋值
                        $('#userName_insert').val(data.username);
                        $('#useraddress_insert').val(data.useraddress);
                        $('#userPsw').val(data.userpsw);
                        $('#userPsw2').val(data.userpsw);
                        $('#userTel_insert').val(data.usertel);
                        $('#userRegisteDate_insert').val(data.userregdate);

                        // 修改使用的隐藏表单域，用于存储记录的id值，同时将前台的userid发回服务器（将前台的id存储，并将id传给后台调用，后台再判断id是否为空）
                        $('#userid').val(data.userid);
                    }
                });
            } else {
                /*
                    如果没有传入id，表示没有该用户，是执行新增操作
                 */
                // 不进行修改操作，进行了新增操作，清空modal中的值
                // 获取form表单，调用form表单的reset方法清空表单数据
                $('#insertform')[0].reset();

                // 手动清空隐藏表单域（因为reset方法不能清空隐藏的表单，所以需要手动清空处理）
                $('#userid').val(null);
            }
        }

    ///////////////////////// 用户信息删除（物理删除） //////////////////////////////
        function deleteUser(userid) {
            // 弹出提示框，进行信息确认(等同于alert)
            var confirmOK = confirm('请确认是否删除该记录？');
            //确认删除
            if (confirmOK) {
                //使用jquery实现ajax的第三种操作，将前台的userId（和后台用于就收的变量一致）传给后台处理
                $.get("deleteUserId?userId=" + userid, function (data) {
                    console.log(data)
                    //回调函数
                    if(data && data == "ok"){
                        alert("删除成功！")
                        //删除后重新显示用户列表
                        doQuery();
                    }else {
                        alert("删除失败！")
                    }
                });
            }
        }

    </script>
</head>
<body>
<div class="ibox-content">

    <%-- =======================查询的form表单====================== --%>
    <form class="form-horizontal" id="queryform">
        <div class="form-group">

            <label class="col-sm-2 control-label">用户名</label>
            <div class="col-sm-2">
                <input type="text" id="userName" name="username" class="form-control">
                <span class="help-block m-b-none" id="user-name-label" style="color: red"></span>
            </div>

            <label class="col-sm-2 control-label">住址</label>
            <div class="col-sm-2">
                <input type="text" id="useraddress" name="useraddress" class="form-control">
                <span class="help-block m-b-none" id="user-address-label" style="color: red"></span>
            </div>

        </div>

        <div class="hr-line-dashed"></div>

        <div class="form-group">

            <label class="col-sm-2 control-label">联系电话</label>
            <div class="col-sm-2">
                <input type="text" id="userTel" name="usertel" class="form-control">
                <span class="help-block m-b-none" id="user-tel-label" style="color: red"></span>
            </div>

            <label class="col-sm-2 control-label">注册日期</label>
            <div class="col-sm-5">

                <div class="col-sm-5">
                    <input type="date" id="userRegisteDate" name="userregdate" placeholder="选择开始日期"
                           class="form-control">
                </div>

                <div class="col-sm-1">
                    -
                </div>

                <div class="col-sm-5">
                    <input type="date" id="userRegisteDate2" name="userregdate2" placeholder="选择截止日期"
                           class="form-control" style="float:none;">
                </div>

            </div>

        </div>
        <div class="hr-line-dashed"></div>
        <div class="form-group">
            <div class="col-sm-4 col-sm-offset-2">
                <%-- onclick="doQuery()"：当点击按钮请求时，直接调用上方定义的函数 --%>
                <button class="btn btn-primary" type="button" onclick="doQuery()">查询</button>
            </div>
            <div class="col-sm-2 col-sm-offset-2">
                <%--  onclick="showModal()":点击新增就去到由用户添加模态框,不传入id  --%>
                <button class="btn btn-primary" type="button" data-toggle="modal" onclick="showModal()" >新增</button>
            </div>
        </div>
    </form>
        <%--=================================查询结果集显示的部分========================================--%>
    <div class="bs-example" data-example-id="hoverable-table">
        <table class="table table-hover">
            <thead>
            <tr>
                <th>序号</th>
                <th>用户名</th>
                <th>住址</th>
                <th>联系电话</th>
                <th>注册日期</th>
                <th>头像</th>
                <th>修改</th>
                <th>删除</th>
            </tr>
            </thead>
            <tbody id="showData">


            </tbody>
        </table>
    </div>
    <div id="pagerbar"></div>
</div>

<%--=======================用户信息新增modal开始（模态框）==========================--%>

<div id="insertModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel">
    <div class="modal-dialog" role="document" style="width: 1000px">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="gridSystemModalLabel">用户信息管理</h4>
            </div>
            <div class="modal-body">
                <%--   这里放置 modal 的表单（从模态框中添加要新增的数据） --%>
                <div class="ibox-content">
                    <form id="insertform" action="addAndUpdateUserInfo" method="post"
                          class="form-horizontal" enctype="multipart/form-data">
                        <%--            隐藏表单域：用于存储记录的id值            --%>
                        <input type="hidden" id="userid" name="userid">

                        <div class="form-group">
                            <label class="col-sm-2 control-label">用户名</label>

                            <div class="col-sm-3">
                                <input type="text" id="userName_insert" name="username" class="form-control">
                                <span class="help-block m-b-none" id="user-name-insert-label"
                                      style="color: #ff0000"></span>
                            </div>

                            <label class="col-sm-2 control-label">住址</label>

                            <div class="col-sm-3">
                                <input type="text" id="useraddress_insert" name="useraddress" class="form-control">
                                <span class="help-block m-b-none" id="user-address-insert-label"
                                      style="color: red"></span>
                            </div>
                        </div>

                        <div class="hr-line-dashed"></div>

                        <div class="form-group">
                            <label class="col-sm-2 control-label">密码</label>
                            <div class="col-sm-3">
                                <input type="password" id="userPsw" name="userpsw" class="form-control"> <span
                                    class="help-block m-b-none">密码由字母、数字、特殊符号组成</span>
                                <span class="help-block m-b-none" id="user-psw-label" style="color: red"></span>
                            </div>

                            <label class="col-sm-2 control-label">确认密码</label>
                            <div class="col-sm-3">
                                <input type="password" id="userPsw2" name="userpsw2" class="form-control"
                                       name="password">
                                <span class="help-block m-b-none" id="user-psw2-label" style="color: red"></span>
                                <span class="help-block m-b-none" id="user-psw3-label" style="color: red"></span>
                            </div>
                        </div>

                        <div class="hr-line-dashed"></div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">联系电话</label>

                            <div class="col-sm-3">
                                <input type="text" id="userTel_insert" name="usertel" class="form-control">
                                <span class="help-block m-b-none" id="user-tel-insert-label" style="color: red"></span>
                            </div>
                            <label class="col-sm-2 control-label">注册日期</label>

                            <div class="col-sm-3">
                                <input type="date" id="userRegisteDate_insert" name="userregdate" placeholder="选择注册日期"
                                       class="form-control">
                                <span class="help-block m-b-none" id="user-registerdate-insert-label"
                                      style="color: red"></span>
                            </div>
                        </div>

                        <div class="hr-line-dashed"></div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">头像</label>
                            <div class="col-sm-3">
                                <input type="file" id="userimg" name="file_userimg" class="form-control">
                                <span class="help-block m-b-none" id="user-img-label" style="color: red"></span>
                            </div>
                        </div>
                    </form>
                </div>


                <%--  这里放置 modal 的表单 结束处--%>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="saveMe()">保存</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<%--=======================用户新增modal结束==========================--%>



</body>
</html>

